{% extends "base.html" %}

{% block title %}潜水活动 - 万岛潜水{% endblock %}

{% block content %}
<div class="container">
    <h1 class="text-center mb-5">潜水活动</h1>
    
    <div class="row mb-4">
        <div class="col-12">
            <div class="card shadow-sm">
                <div class="card-body">
                    <p class="lead text-center mb-0">参加我们的特色潜水活动，探索外伶仃岛周边的美丽海域，结交志同道合的潜水爱好者。</p>
                </div>
            </div>
        </div>
    </div>
    
    <div class="row mb-5">
        {% for activity in activities %}
        <div class="col-md-6 mb-4">
            <div class="card h-100 shadow-sm">
                <img src="{{ url_for('static', filename='uploads/' + activity.image) }}" class="card-img-top" alt="{{ activity.title }}">
                <div class="card-body">
                    <h5 class="card-title">{{ activity.title }}</h5>
                    <p class="card-text">{{ activity.description|truncate(150) }}</p>
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <p class="card-text mb-0"><i class="fas fa-calendar-alt text-primary me-2"></i>{{ activity.date.strftime('%Y-%m-%d') }}</p>
                            <p class="card-text mb-0"><i class="fas fa-map-marker-alt text-primary me-2"></i>外伶仃岛</p>
                        </div>
                        <div>
                            <p class="card-text mb-0"><strong class="text-primary">¥{{ activity.price }}</strong></p>
                            <p class="card-text mb-0"><small class="text-muted">活动日期：{{ activity.date.strftime('%Y-%m-%d') }}</small></p>
                        </div>
                    </div>
                </div>
                <div class="card-footer bg-white">
                    <div class="d-grid gap-2">
                        <a href="{{ url_for('main.activity_detail', id=activity.id) }}" class="btn btn-outline-primary">查看详情</a>
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    
    <div class="row mb-5">
        <div class="col-12">
            <div class="card bg-light">
                <div class="card-body">
                    <h3 class="card-title text-center">活动特色</h3>
                    <div class="row mt-4">
                        <div class="col-md-4 mb-3">
                            <div class="d-flex">
                                <div class="flex-shrink-0">
                                    <i class="fas fa-users fa-2x text-primary"></i>
                                </div>
                                <div class="flex-grow-1 ms-3">
                                    <h5>小团出行</h5>
                                    <p>每个活动限制参与人数，确保每位参与者都能得到充分的关注和指导。</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 mb-3">
                            <div class="d-flex">
                                <div class="flex-shrink-0">
                                    <i class="fas fa-camera fa-2x text-primary"></i>
                                </div>
                                <div class="flex-grow-1 ms-3">
                                    <h5>水下摄影</h5>
                                    <p>专业摄影师随行，为您捕捉水下精彩瞬间，留下美好回忆。</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 mb-3">
                            <div class="d-flex">
                                <div class="flex-shrink-0">
                                    <i class="fas fa-fish fa-2x text-primary"></i>
                                </div>
                                <div class="flex-grow-1 ms-3">
                                    <h5>特色潜点</h5>
                                    <p>精选外伶仃岛周边最美的潜点，探索丰富的海洋生态。</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 mb-3">
                            <div class="d-flex">
                                <div class="flex-shrink-0">
                                    <i class="fas fa-utensils fa-2x text-primary"></i>
                                </div>
                                <div class="flex-grow-1 ms-3">
                                    <h5>美食体验</h5>
                                    <p>品尝当地特色海鲜，感受岛上独特的美食文化。</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 mb-3">
                            <div class="d-flex">
                                <div class="flex-shrink-0">
                                    <i class="fas fa-shield-alt fa-2x text-primary"></i>
                                </div>
                                <div class="flex-grow-1 ms-3">
                                    <h5>安全保障</h5>
                                    <p>专业教练全程陪伴，确保您的潜水安全和乐趣。</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 mb-3">
                            <div class="d-flex">
                                <div class="flex-shrink-0">
                                    <i class="fas fa-gift fa-2x text-primary"></i>
                                </div>
                                <div class="flex-grow-1 ms-3">
                                    <h5>精美礼品</h5>
                                    <p>活动结束后赠送精美纪念品，让您的潜水之旅更加难忘。</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="row">
        <div class="col-12">
            <div class="card bg-primary text-white">
                <div class="card-body text-center p-4">
                    <h3 class="card-title">想要参加我们的潜水活动？</h3>
                    <p class="card-text">立即报名，与志同道合的潜水爱好者一起探索海底世界！</p>
                    <a href="#" class="btn btn-light btn-lg">联系我们</a>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %} 